<template>
  <view class="mounth-chart">
    <view class="calendar-line">
      <text class="iconfont icon-zuojiantou"></text>
      <text>
        <text>2023-08-23</text>
        <text class="iconfont icon-rili"></text>
      </text>
      <text class="iconfont icon-youjiantou1"></text>
    </view>
    <view class="number">
      <view class="number-item">
        <view>当日发电量</view>
        <!-- 如果有值且有小数 -->
        <view v-if=" dayPower &&  dayPower % 1 !== 0">
          <text class="integer">{{ Math.trunc( dayPower) }}</text>
          <text class="decimal">
            {{
               dayPower
                .toString()
                .substring(
                   dayPower.toString().indexOf("."),
                   dayPower.toString().indexOf(".") + 2
                )
            }}
          </text>
          <text class="unit">kWp</text>
        </view>
        <!-- 如果有值且是整数 -->
        <view v-else-if=" dayPower &&  dayPower % 1 == 0">
          <text class="integer">{{  dayPower }}</text>
          <text class="unit">kWp</text>
        </view>
        <!-- 如果没值 -->
        <view v-else>--</view>
      </view>
    <view class="number-item">
      <view>当日满发小时</view>
      <!-- 如果有值且有小数 -->
      <view v-if=" fullHour &&  fullHour % 1 !== 0">
        <text class="integer">{{ Math.trunc( fullHour) }}</text>
        <text class="decimal">
          {{
             fullHour
              .toString()
              .substring(
                 fullHour.toString().indexOf("."),
                 fullHour.toString().indexOf(".") + 2
              )
          }}
        </text>
        <text class="unit">h</text>
      </view>
      <!-- 如果有值且是整数 -->
      <view v-else-if=" fullHour &&  fullHour % 1 == 0">
        <text class="integer">{{  fullHour }}</text>
        <text class="unit">h</text>
      </view>
      <!-- 如果没值 -->
      <view v-else>--</view>
    </view>
    </view>
  </view>
</template>

<script>
</script>

<style lang="scss" scoped>
  .integer {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
  }
  
  .decimal {
    font-size: 24rpx;
  
  }
  
  .unit {
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .calendar-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f3f4f6;
    padding: 10rpx 20rpx;
  
    .icon-rili {
      margin-left: 10rpx;
      color: #3f8cf7;
    }
  }
  
  .number {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 40rpx;
  
    .number-item {
    }
  }
</style>